<%@ page import="com.ws.ssmzongjie3.util.Res" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
	<script src="../bootstrap/js/jquery-2.1.0.min.js"></script>
	<script src="../bootstrap/js/bootstrap.min.js"></script>
    <style>

       .cus-container{
           width: 1368px;
       }
       #user-add .modal-content{
       	padding: 0 20px 20px;	
       }
       #user-edit .modal-content{
       	padding: 0 20px 20px;	
       }
       
    </style>
</head>
<body>
	
    <div class="container cus-container">
        <!-- <h3 class="text-center">用户信息列表</h3> -->

        <div>
            <!-- 搜索框div -->
            <div id="search-user" style="float: left; margin: 10px 0px;">
                <form class="form-inline" action="${pageContext.request.contextPath}/user/list" method="get">
                    <div class="form-group">
                        <label for="exampleInputName2">用户名</label>
                        <input type="text" name="u_name" value="${param.u_name}" class="form-control" id="exampleInputName2">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputSex">性别</label>
                        <select name="u_sex" class="form-control" id="exampleInputSex">
                            <option value="">全部</option>
                            <option value="男" <c:if test="${param.u_sex == '男'}">selected</c:if>>男</option>
                            <option value="女" <c:if test="${param.u_sex == '女'}">selected</c:if>>女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail">邮箱</label>
                        <input type="text" name="u_email" value="${param.u_email}" class="form-control" id="exampleInputEmail">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPhone">手机号</label>
                        <input type="text" name="u_phone" value="${param.u_phone}" class="form-control" id="exampleInputPhone">
                    </div>
                    <input type="hidden" name="currentPage" value="${pageInfo.pageNum}">
                    <input type="hidden" name="pageSize" value="${pageInfo.pageSize}">
                    <button type="submit" class="btn btn-default">查询</button>
                    <button type="button" class="btn btn-default" onclick="clearSearch()">清空</button>
                </form>    
            </div>
            
            <!-- 添加、删除的按钮 -->
            <div style="float: right;margin: 10px 0px;">
                <a class="btn btn-primary" href="${pageContext.request.contextPath}/user/add">添加用户</a>
                <a class="btn btn-danger" href="javascript:void(0);" onclick="deleteSelected()">批量删除</a>
            </div>
        </div>

      
       <table class="table table-bordered clearfix" id="user-list">
        <thead>
        	<tr class="bg-primary">
	            <th><input type="checkbox" id="firstCb"></th>
	            <th>编号</th>
	            <th>用户名</th>
	            <th>性别</th>
	            <th>邮箱</th>
	            <th>手机</th>
	            <th>头像</th>
	            <th>出生日期</th>
	            <th>操作</th> 
	        </tr> 
        </thead> 
        <tbody>
            <c:forEach var="user" items="${pageInfo.list}">
                <tr>
                    <td><input type="checkbox" name="user_id" value="${user.user_id}"></td>
                    <td>${user.user_id}</td>
                    <td>${user.u_name}</td>
                    <td>${user.u_sex}</td>
                    <td>${user.u_email}</td>
                    <td>${user.u_phone}</td>
                    <td><img src="<%=Res.fileUrl%>${user.u_avatar}" width="50" height="50" alt="头像"></td>
                    <td><fmt:formatDate value="${user.u_birthday}" pattern="yyyy-MM-dd"/></td>
                    <td>
                        <a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/user/huixian?user_id=${user.user_id}">编辑</a>&nbsp;
                        <a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/user/delete?user_id=${user.user_id}">删除</a>
                    </td>
                </tr>
            </c:forEach>
        </tbody>
      </table>

        <!-- 分页导航 -->
        <div class="text-center">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li class="${pageInfo.pageNum == 1 ? 'disabled' : ''}">
                        <a href="${pageContext.request.contextPath}/user/list?currentPage=1&pageSize=${pageInfo.pageSize}&u_name=${param.u_name}&u_sex=${param.u_sex}&u_email=${param.u_email}&u_phone=${param.u_phone}" aria-label="First">
                            <span aria-hidden="true">首页</span>
                        </a>
                    </li>
                    <li class="${pageInfo.pageNum == 1 ? 'disabled' : ''}">
                        <a href="${pageContext.request.contextPath}/user/list?currentPage=${pageInfo.pageNum - 1}&pageSize=${pageInfo.pageSize}&u_name=${param.u_name}&u_sex=${param.u_sex}&u_email=${param.u_email}&u_phone=${param.u_phone}" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <c:forEach begin="1" end="${pageInfo.pages}" var="i">
                        <li class="${i == pageInfo.pageNum ? 'active' : ''}">
                            <a href="${pageContext.request.contextPath}/user/list?currentPage=${i}&pageSize=${pageInfo.pageSize}&u_name=${param.u_name}&u_sex=${param.u_sex}&u_email=${param.u_email}&u_phone=${param.u_phone}">${i}</a>
                        </li>
                    </c:forEach>
                    <li class="${pageInfo.pageNum == pageInfo.pages ? 'disabled' : ''}">
                        <a href="${pageContext.request.contextPath}/user/list?currentPage=${pageInfo.pageNum + 1}&pageSize=${pageInfo.pageSize}&u_name=${param.u_name}&u_sex=${param.u_sex}&u_email=${param.u_email}&u_phone=${param.u_phone}" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                    <li class="${pageInfo.pageNum == pageInfo.pages ? 'disabled' : ''}">
                        <a href="${pageContext.request.contextPath}/user/list?currentPage=${pageInfo.pages}&pageSize=${pageInfo.pageSize}&u_name=${param.u_name}&u_sex=${param.u_sex}&u_email=${param.u_email}&u_phone=${param.u_phone}" aria-label="Last">
                            <span aria-hidden="true">尾页</span>
                        </a>
                    </li>
                </ul>
            </nav>
            <div class="text-muted">
                当前第${pageInfo.pageNum}页/共${pageInfo.pages}页，共${pageInfo.total}条数据
                每页显示
                <select name="pageSize" onchange="changePageSize(this.value)">
                    <option value="5" <c:if test="${pageInfo.pageSize == 5}">selected</c:if>>5</option>
                    <option value="10" <c:if test="${pageInfo.pageSize == 10}">selected</c:if>>10</option>
                    <option value="15" <c:if test="${pageInfo.pageSize == 15}">selected</c:if>>15</option>
                    <option value="20" <c:if test="${pageInfo.pageSize == 20}">selected</c:if>>20</option>
                </select>条数据
            </div>
        </div>

    </div>
    
</body>
</html>

<script>
    // 清空查询条件
    function clearSearch() {
        window.location.href = "${pageContext.request.contextPath}/user/list";
    }


    // 改变每页显示条数
    function changePageSize(pageSize) {
        // 获取当前页码
        var currentPage = ${pageInfo.pageNum};
        // 保留当前页码，而不是跳转到第一页
        window.location.href = "${pageContext.request.contextPath}/user/list?currentPage=" + currentPage + "&pageSize=" + pageSize + "&u_name=${param.u_name}&u_sex=${param.u_sex}&u_email=${param.u_email}&u_phone=${param.u_phone}";
    }
</script>

<style>
    .cus-container {
        width: 1000px; /* 缩小容器宽度 */
        margin: 0 auto; /* 居中显示 */
    }
    .table {
        font-size: 14px; /* 缩小表格字体 */
    }
    .table th, .table td {
        padding: 8px; /* 缩小单元格内边距 */
    }
    .pagination {
        margin: 10px 0; /* 调整分页导航的边距 */
    }
    .text-muted {
        margin-top: 10px; /* 调整分页信息的边距 */
    }
</style>